<template>
  <el-drawer
    :title="drawerTitle[drawerType]"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDialog"
    custom-class="tag-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <h4 class="type-title">
          <div class="icon-box"><icon-svg name="iconBase"></icon-svg></div>
          <span>基本信息</span>
        </h4>
        <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
          <el-row>
            <el-col :span="24">
              <el-form-item label="角色名称" prop="roleNm">
                <el-input placeholder="请输入角色名称" v-model="editForm.roleNm"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="角色描述" prop="roleDesc">
                <el-input
                  type="textarea"
                  placeholder="请输入角色描述"
                  v-model="editForm.roleDesc"
                  :rows="3"
                  resize="none"
                  maxlength="50"
                  show-word-limit
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="权限管理">
                <el-button type="primary" plain size="mini" @click="setMenu">配置权限</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="适用用户" prop="tmplId">
                <tag-rules :ruleId="editForm.tmplId" :ruleName="editForm.tmplName" @confirm="ruleSave"></tag-rules>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="clearDialog">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>

    <menu-dialog ref="menuDialog" @save="menuSave"></menu-dialog>
  </el-drawer>
</template>

<script>
import menuDialog from './role-menu'
export default {
  components: {
    menuDialog
  },
  data() {
    return {
      drawerVisible: false,
      drawerType: 'add',
      drawerTitle: {
        add: '新增功能角色',
        edit: '修改功能角色'
      },
      editForm: {
        id: '',
        status: '',
        roleNm: '',
        roleDesc: '',
        sysRole: 0,
        menuIds: [],
        tmplId: '',
        tmplName: ''
      },
      oldMenuIds: [],
      editFormRules: {
        roleNm: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
          { max: 30, message: '角色名称不能超过30个字符', trigger: 'blur' }
        ],
        roleDesc: [{ max: 50, message: '角色描述不能超过50个字符', trigger: 'blur' }],
        tmplId: [{ required: true, message: '请设置用户规则', trigger: 'change' }]
      }
    }
  },
  methods: {
    showDrawer(params) {
      this.drawerType = params.type
      if (this.drawerType === 'edit') {
        this.editForm.id = params.data.roleId
        this.editForm.status = params.data.roleStatus
        this.editForm.roleNm = params.data.roleNm
        this.editForm.roleDesc = params.data.roleDesc || ''
        this.editForm.sysRole = params.data.sysRole ? 1 : 0
        this.editForm.menuIds = params.data.menuIds || []
        this.oldMenuIds = params.data.menuIds || []
        this.editForm.tmplId = params.data.tmplId || ''
        this.editForm.tmplName = params.data.tmplName || ''
      }
      this.drawerVisible = true
    },
    setMenu() {
      this.$refs.menuDialog.showDialog(this.editForm.menuIds)
    },
    menuSave(list) {
      this.editForm.menuIds = list
    },
    ruleSave(data) {
      this.editForm.tmplId = data.id
      this.editForm.tmplName = data.name
    },
    submit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.$ajax({
            url: this.$ajax.setUrl('sys/sysRoleMgr'),
            method: this.drawerType === 'add' ? 'post' : 'put',
            data: this.$ajax.setData(this.getParams())
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.clearDialog()
              this.$emit('refresh')
              this.$message.success(data.data || data.msg)
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    getParams() {
      let params = {
        roleNm: this.editForm.roleNm,
        roleDesc: this.editForm.roleDesc,
        sysRole: this.editForm.sysRole,
        roleType: 1,
        menuIds: this.editForm.menuIds,
        tmplId: this.editForm.tmplId
      }
      if (this.drawerType === 'edit') {
        params.roleId = this.editForm.id
        params.roleStatus = this.editForm.status
        if (this.$utils.compareArray(this.editForm.menuIds, this.oldMenuIds)) {
          params.menuIds = []
        } else if (this.editForm.menuIds.length === 0) {
          params.menuIds = [-1]
        }
      }
      return params
    },
    clearDialog() {
      this.editForm.id = ''
      this.editForm.status = ''
      this.editForm.roleNm = ''
      this.editForm.roleDesc = ''
      this.editForm.sysRole = 0
      this.editForm.menuIds = []
      this.editForm.tmplId = ''
      this.editForm.tmplName = ''
      this.oldMenuIds = []
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
        this.drawerVisible = false
      })
    }
  }
}
</script>

<style lang="scss"></style>
